Below we have prepared CropIt template structure

This code provides the basic structure of the html template. The [ ] shows the main parts of the html template

We uses Bootstrap's grid system, you can see its structure below. For more information please visit the official bootstrap documentation page.

You can use different styles of headings and text.

You have two styles of buttons. These examples you can use for your ideas.

You have two styles of buttons. These examples you can use for your ideas.

If you use a large amount of content is recommended to use a preloader on your page. Below is an example of its implementation code.

Header has two styles, light and dark, to add this class dark-bg or white-bg

To display a logo in the header add the code:

To add the navigation in the header using the following code

current-menu-item - The active menu item
menu-item-has-children - The menu has a submenu
sub-nav - The subnav

Code Search form after adding navigation

Code footer

The template is used 2 icon font, icon-font, medical-icons & social-icons

In creating this slider OwlCarousel library was used, read the official documentation for more flexible settings

<!-- Add in css files area -->
<link rel="stylesheet" href="js/owl.carousel/owl.carousel.css">

<!-- Add in js files area -->
<script src="js/owl.carousel/owl.carousel.min.js"></script>

To display the contact row use this code:

This unit is responsible for subscriptions to the notification from the site

Gallery has 2 style, grid and masonry, also has a sorting items by tag

<!-- Add in js files area -->
<script src="js/isotope.pkgd.min.js"></script>

Blog has 2 style

<!-- Add in js files area -->
<script src="js/isotope.pkgd.min.js"></script>

To add a map, you need to get Google API key. More can be found in the official documentation for details about the Google Maps API.

function initialize() {
var myLatlng = new google.maps.LatLng([ Center map location ]);
	var mapOptions = {
		zoom: 16,
		center: myLatlng,
		disableDefaultUI: true,
		scrollwheel: false,
		mapTypeId: google.maps.MapTypeId.ROADMAP,
		styles: [{"featureType":"all","elementType":"all","stylers":[{"saturation":-100},{"gamma":1}]}]
	}
	var map = new google.maps.Map(document.getElementById("map"), mapOptions);

	var myLatLng = new google.maps.LatLng([ Marker location ]);
	var beachMarker = new google.maps.Marker({
		position: myLatLng,
		map: map
	});
	google.maps.event.addDomListener(window, "resize", function() {
		var center = map.getCenter();
		google.maps.event.trigger(map, "resize");
		map.setCenter(center); 
	});
}
google.maps.event.addDomListener(window, 'load', initialize);

<!-- Add in js files area -->
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=[ Enter your key ]&sensor=false"></script>

Images were used to demonstrate the resource template shutterstock.com

Important:
Please note that theme does not include the images in the source zip file.